<template lang="pug">
  el-row(:gutter="20")
    el-col(:span="12" v-for="(item, index) in gradeList" :key="index")
      .innerPanel
        p
          | {{ item.classesCount }}
          small 个
        p
          | {{ item.childrenCount }}
          small 人
        h3 {{item.name}}
        i.iconfont.icon-banji
</template>
<script>
export default {
  name: 'ClassDistribute',
  props: {
    gradeList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>
  @import url('../index.scss');
  .innerPanel{
    background: #fff;
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 10px;
    position: relative;

    p {
      font-size: 21px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 1.2;
      position: relative;
      z-index: 1;

      small {
        font-size: 13px;
        font-weight: lighter;
        margin-left: 5px;
      }
    }

    h3 {
      font-size: 13px;
      margin: 0;
      font-weight: normal;
      color: #333333;
      margin-top: 5px;
      position: relative;
      z-index: 1;
    }

    > .iconfont{
      position: absolute;
      right: 16px;
      bottom: 10px;
      color: #fbfbfb;
      font-size: 56px;
      z-index: 0
    }
  }
</style>
